<template>
  <div class="app-container">
    <el-form :inline="true" :model="dataForm" ref="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item label="作业名称" prop="taskName">
        <el-input v-model="dataForm.taskName" placeholder="作业名称"></el-input>
      </el-form-item>
      <el-form-item label="课程名称" prop="taskName">
        <el-input v-model="dataForm.courseName" placeholder="课程名称"></el-input>
      </el-form-item>
      <el-form-item label="作业状态" prop="status">
        <el-select v-model="dataForm.status" placeholder="请选状态" >
          <el-option key="1" label="未提交" value="1"></el-option>
          <el-option key="2" label="已提交" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" type="primary" @click="getDataList()">查询</el-button>
        <el-button icon="el-icon-refresh-left" @click="resetForm()">重置</el-button>
      </el-form-item>
      <el-divider></el-divider>
    </el-form>

    <div class="avue-crud">
      <el-table
          :data="dataList"
          border
          v-loading="dataListLoading">
        <el-table-column
            prop="courseName"
            header-align="center"
            align="center"
            label="课程名称">
        </el-table-column>
        <el-table-column
            prop="taskName"
            header-align="center"
            align="center"
            label="作业名称">
        </el-table-column>
        <el-table-column
            prop="radioQuestionNum"
            header-align="center"
            align="center"
            label="单选数量">
        </el-table-column>
        <el-table-column
            prop="checkboxQuestionNum"
            header-align="center"
            align="center"
            label="多选数量">
        </el-table-column>
        <el-table-column
            prop="estimateQuestionNum"
            header-align="center"
            align="center"
            label="判断数量">
        </el-table-column>
        <el-table-column
            prop="subjectiveQuestionNum"
            header-align="center"
            align="center"
            label="主观数量">
        </el-table-column>
        <el-table-column
            prop="score"
            header-align="center"
            align="center"
            label="满分">
        </el-table-column>
        <el-table-column
            prop="startDate"
            header-align="center"
            align="center"
            label="开始时间">
        </el-table-column>
        <el-table-column
            prop="endDate"
            header-align="center"
            align="center"
            label="结束时间">
        </el-table-column>
        <el-table-column
          prop="answerTime"
          header-align="center"
          align="center"
          label="提交时间">
        </el-table-column>
        <el-table-column
          prop="subDesc"
          header-align="center"
          align="center"
          label="作业状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.subDesc=='未提交'" type="danger">未提交</el-tag>
            <el-tag v-if="scope.row.subDesc=='已提交'">已提交</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="actualScore"
          header-align="center"
          align="center"
          label="得分">
        </el-table-column>
        <el-table-column style="width: 300px"
            header-align="center"
            align="center"
            label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" v-if="scope.row.subDesc=='未提交'"  @click="startDoHomeworkEvent(scope.row)" >开始答题
            </el-button>
            <el-button type="text" size="small"  v-if="scope.row.subDesc=='已提交' && scope.row.readStatus>0 " @click="resultDoHomeworkHandle(scope.row)">答题记录
            </el-button>
            <label   v-if="scope.row.subDesc=='已提交' && scope.row.readStatus ==0">待批阅
            </label>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="avue-crud__pagination">
      <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[5,10,20,50]"
          :page-size="pageSize"
          :total="totalPage"
          background
          layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import { fetchList } from '@/api/student/workTaskStudent'

export default {
  data() {
    return {
      dataForm: {
        taskName: '',
        status: '',
        courseName: ''
      },
      searchForm: {},
      dataList: [],
      pageIndex: 1,
      pageSize: 5,
      totalPage: 0,
      doHomeworkVisible: false,
      autoReadeVisible: false
    }
  },

  created() {
    this.getDataList()
  },
  methods: {

    resetForm() {
      this.dataForm.title = ''
      this.dataForm.courseName = ''
      this.$refs['dataForm'].resetFields()
      this.getDataList()
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      fetchList(Object.assign({
        current: this.pageIndex,
        size: this.pageSize
      }, this.dataForm)).then(response => {
        this.dataList = response.data.records
        this.totalPage = response.data.total
      })
      this.dataListLoading = false
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 开始做作业
    startDoHomeworkEvent(row) {
      const date = new Date().getTime()
      const start = new Date(row.startDate).getTime()
      const end = new Date(row.endDate).getTime()
      console.log(date - start)
      console.log(date - end)
      if (date < start) {
        this.$message.warning('未到答题开始时间！')
        return
      }
      if (date > end) {
        this.$message.warning('答题已结束！')
        return
      }
      this.$router.push({ name: 'studentHomeworkOnLine', params: { id: row.id }})
    },
    // 阅卷
    resultDoHomeworkHandle(row) {
      this.$router.push({ name: 'sHomeworkResult', params: { id: row.id }})
    }
  }
}
</script>
